<template>
  <div class="main" webkit-scrollbar @mousewheel="srollHandle">
    <!-- 1f 头部导航 -->
    <div class="nav" id="ttt">
      <div class="center">
        <router-link to="/">
          <img src="https://www.hzsp.com/images/logo.png" alt="" />
        </router-link>

        <router-link to="index"
          ><img src="https://www.hzsp.com/booking/images/b-home.png" alt="" />
        </router-link>
      </div>
    </div>

    <!-- 2f主体部分 -->
    <div class="box">
      <div class="center">
        <!-- 购票部分 -->
        <div class="buy" id="tbd">
          <div class="img">
            <img
              :src="
                tickets[$store.state.type].ticketnamedetail[$store.state.detail]
                  .img
              "
              alt=""
            />
          </div>
          <div class="text">
            <span class="ticketmenu_xiaokuangword">{{
              tickets[$store.state.type].ticketnamedetail[$store.state.detail]
                .xuanxiang
            }}</span>
            <span
              :title="
                tickets[$store.state.type].ticketnamedetail[$store.state.detail]
                  .biaoqian
              "
              >{{
                tickets[$store.state.type].ticketnamedetail[$store.state.detail]
                  .biaoqian
              }}</span
            >
            <yuding></yuding>
          </div>
        </div>

        <!-- 旁边的固定的结算页面 -->
        <div class="wz" :class="a">
          <div class="js">
            <div class="xx">结算信息</div>
            <div class="p">
              <span>成人票</span>
              <p>数量: {{ $store.state.num }}</p>
            </div>
            <div class="xzf">
              <div>
                <p>需支付:</p>
                <span
                  >¥{{
                    $store.state.num *
                    tickets[$store.state.type].ticketnamedetail[
                      $store.state.detail
                    ].price
                  }}</span
                >
              </div>
            </div>
            <div class="yud">
              <input type="checkbox" />
              已阅读并同意<a href="#maodian">"预订须知"</a>和
              <a href="#">《会员服务协议及隐私政策》</a>
            </div>
            <a href="#">提交订单</a>
          </div>
        </div>

        <!-- 选择日期部分 -->
        <div class="buy" id="xw">
          <!-- 日期选择 -->
          <span class="date">日期</span>
          <div class="rl" @mousewheel.prevent="changescroll" ref="mutter">
            <div
              class="fk"
              v-for="(item, index) in listArr"
              :key="index"
              :class="{ activeCss: activeVar == index }"
              @click="activeFun((activeVar = index))"
            >
              {{ item.xq }}{{ item.m }}-{{ item.d }}
              <p>
                ¥{{
                  tickets[$store.state.type].ticketnamedetail[
                    $store.state.detail
                  ].price
                }}
              </p>
            </div>
          </div>
          <div class="fk">
            <p>更多日期 ></p>
          </div>

          <!-- 数量选择 -->
          <div class="sl">
            <span>购买数量</span>
            <div class="jj">
              <button
                @click="$store.commit('num_jian')"
                :disabled="$store.state.num == 1"
              >
                -
              </button>
              <button>{{ $store.state.num }}</button>
              <button @click="$store.commit('num_jia')">+</button>
            </div>
          </div>
        </div>

        <!--联系方式 -->

        <div class="tbuy" id="tbuy">
          <div class="phone">
            <img src="https://www.hzsp.com/images/phone2.png" alt="" />
            <div class="inp">
              <span>联系方式:</span>
              
              <input
                type="text"
                placeholder="用于接收确认短信及入园凭证"
                v-model="phone"
                @blur="checkPhone()"
              />
  
            </div>
          </div>
        </div>

        <!-- 入园游客信息 -->
        <div class="buy">
          <div class="ry">
            <img src="https://www.hzsp.com/booking/images/z1.png" alt="" />
            <span>入园游客信息</span>
          </div>
        </div>

        <!-- 游客信息输入框 -->
        <div class="tbuy">
          <div class="phone">
            <div class="yuan">1</div>
            <div class="srk">
              <div class="inp">
                <span>姓 名:</span>
                <input type="text" placeholder="请输入姓名" />
              </div>
              <div class="inp">
                <span>身份证:</span>
                <input type="text" placeholder="请输入身份证号码" />
              </div>
            </div>
          </div>
        </div>
      
        <!-- 入园时间 -->
        <div class="buy">
          <div class="span">入园时间</div>
        </div>
        <div class="tbuy tb">
          <div class="zb" :class="{ active: ac == 0 }" @click="ac = 0">
            09:30~12:00
          </div>
          <div class="zb" :class="{ active: ac == 1 }" @click="ac = 1">
            12:00~16:00
          </div>
        </div>

        <ul class="scroll" :class="s">
          <li :class="{ border: b == 0 }" @click="goToAnchor('#ttt')">
            门票预订
          </li>
          <li :class="{ border: b == 1 }" @click="goToAnchor2('#maodian')">
            预订须知
          </li>
          <li :class="{ border: b == 2 }" @click="goToAnchor3('#jqjs')">
            景区介绍
          </li>
        </ul>

        <!-- 优惠 -->
        <div class="buy">
          <div class="yh">
            <img src="https://www.hzsp.com/booking/images/z2.png" alt="" />
            <span>优惠</span>
            <p>促销活动和优惠券不可叠加使用</p>
          </div>
        </div>
        <div class="tbuy dl" id="maodian">
          <div>
            <router-link to="login">登录</router-link>
            <p>后使用优惠券</p>
          </div>
        </div>

        <div class="buy yd">
          <div>
            <img src="https://www.hzsp.com/booking/images/z3.png" alt="" />
            <span>预定须知</span>
          </div>
        </div>

        <div class="sbuy">
          <div class="item">
            <div class="title">费用包含</div>
            <div class="nr">
              <p>
                1、根据杭州市富阳区防疫指挥部最新要求，全区常态化核酸检测自8月26日0时起由7天调整为72小时。在切实按照高中风险地区落实涉疫人员相应健康管理措施的基础上，对省外风险地区来杭返杭人员严格落实三天三检，省外其他地区人员应在抵杭后完成一次“落地检”，倡导进行三天三检，后续按照市内常态化核酸检测要求予以落实。本景区将根据区防疫指挥部的最新要求动态执行防疫政策，请游客朋友提前咨询富阳区防疫政策，由此带来的不便，敬请谅解；
              </p>
              <p>2、适用1.5米以上人群（包含门票、小火车、亲子乐园、演出）；</p>
              <p>3、单次入园凭证，不可重复使用，不可改签；</p>
              <p>4、出游当天购买为门市价，建议提前一天预订。</p>
            </div>
          </div>

          <div class="item">
            <div class="title">使用说明</div>
            <div class="nr">
              <p>
                1、根据疫情防控要求，园区实行实名制入园，出游务必携带购票身份证原件或儿童户口本，至检票口检票入园；
              </p>
              <p>2、一笔订单多张票，不支持部分退款，不支持部分使用。</p>
            </div>
          </div>

          <div class="item">
            <div class="title">退票须知</div>
            <div class="nr">
              <p>
                1、提前预订：未使用的电子票出游日前申请退票，可全额无损退款；其它时间申请退票每单收取5%手续费；
              </p>
              <p>
                2、当日购买当日入园的电子票未出游时，当日申请退款可全额无损退款；
              </p>
              <p>3、未使用申请退款的，款项在7个工作日之内原路返回；</p>
              <p>
                4、如需发票，务必在出游当天15点之前凭预订信息至12号售票窗口开取；如游玩当天忘记开发票的，游玩归来后主动联系景区客服并提供开票信息和邮箱地址，我们开具电子发票发至所提供的邮箱；
              </p>
              <p>5、如有疑问请咨询：400-102-6688 。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Bot id="jqjs"></Bot>
  </div>
</template>
>
<script>
import Yuding from "@/components/yuding.vue";
// import axios from 'axios';
import formatDate from "@/assets/js/util.js";
import Bot from "../components/index/Bot.vue";
export default {
  components: { Yuding, Bot },
  data() {
    return {
      phone: "",
      num: 1,
      b: 1,
      s: {
        scroll: true,
        enen: false,
      },
      a: "wz",
      number: 1,
      ac: 0,
      activeVar: 0,
      tickets: [
        {
          tid: 0,
          ticketname: "门票",
          ticketnamedetail: [
            {
              xuanxiang: "成人票",
              price: 210,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg",
              biaoqian: "身份证入园,有条件退",
            },
            {
              xuanxiang: "儿童长者票",
              price: 140,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg",
              biaoqian: "身份证入园,有条件退",
            },
            {
              xuanxiang: "大学生门票",
              price: 180,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg",
              biaoqian: "身份证入园,有条件退",
            },
            {
              xuanxiang: "自驾游车辆通行证",
              price: 220,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/191121919887.jpg",
              biaoqian: "身份证入园,有条件退",
            },
          ],
        },
        {
          tid: 1,
          ticketname: "年卡",
          ticketnamedetail: [
            {
              xuanxiang: "成人年卡",
              price: 680,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg",
              biaoqian: "激活使用,不限次",
            },
            {
              xuanxiang: "双人年卡",
              price: 1360,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg",
              biaoqian: "激活使用,不限次",
            },
            {
              xuanxiang: "儿童长者年卡",
              price: 420,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg",
              biaoqian: "激活使用,不限次",
            },
            {
              xuanxiang: "家庭年卡A",
              price: 1780,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg",
              biaoqian: "激活使用,不限次",
            },
            {
              xuanxiang: "家庭年卡B",
              price: 2200,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg",
              biaoqian: "激活使用,不限次",
            },
          ],
        },

        {
          tid: 2,
          ticketname: "礼品卡/礼品票",
          ticketnamedetail: [
            {
              xuanxiang: "2022礼品票",
              price: 220,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211225745127.jpg",
              biaoqian: "实体票,不可修改",
            },
            {
              xuanxiang: "2022礼品卡-儿童长者年卡",
              price: 420,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg",
              biaoqian: "激活使用,不限次,不可退改",
            },
            {
              xuanxiang: "2022礼品卡-成人年卡",
              price: 680,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg",
              biaoqian: "激活使用,不限次,不可退改",
            },
            {
              xuanxiang: "2022礼品卡-双人年卡",
              price: 1360,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg",
              biaoqian: "激活使用,不限次,不可退改",
            },
            {
              xuanxiang: "2022礼品卡-家庭年卡A",
              price: 1780,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg",
              biaoqian: "激活使用,不限次,不可退改",
            },
            {
              xuanxiang: "2022礼品卡-家庭年卡B",
              price: 2200,
              img: "https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg",
              biaoqian: "激活使用,不限次,不可退改",
            },
          ],
        },
      ],
      listArr: [
        formatDate(0),
        formatDate(1),
        formatDate(2),
        formatDate(3),
        formatDate(4),
        formatDate(5),
        formatDate(6),
      ],
      price: 210,
    };
  },

  methods: {
    checkPhone() {
      let d = /^1[3456789]\d{9}$/
      if(d.test(this.phone)){
        alert('111')
      }else{
        alert('222')
      }
    },
    goToAnchor(selector) {
      this.b = 0;
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐
      });
    },
    goToAnchor2(selector) {
      this.b = 1;
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐
      });
    },
    goToAnchor3(selector) {
      this.b = 2;
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐
      });
    },
    srollHandle() {
      var weizi = document.body.scrollTop || document.documentElement.scrollTop;
      console.log(weizi);
      if (weizi >= 1000) {
        this.s.enen = true;
      } else {
        this.s.enen = false;
      }
    },
    changescroll(e) {
      if (e.deltaY > 0) {
        this.$refs.mutter.scrollLeft = this.$refs.mutter.scrollLeft + 40;
      } else {
        this.$refs.mutter.scrollLeft = this.$refs.mutter.scrollLeft - 40;
      }
    },
    jian() {
      if (this.number <= 0) {
        this.number = 0;
      } else {
        this.number--;
      }
    },
    jia() {
      this.number++;
    },
    activeFun(index) {
      this.activeVar = index;
    },
  },
  watch: {},
};
</script>

<style scoped src="../assets/css/buy.css"></style>

<style lang="scss" scoped>
.main {
  overflow-x: hidden;
}

.main .center {
  margin: 0 auto;
  width: 1200px;
}
.body {
  position: relative;
}
</style>
